<script setup>
import {onMounted, nextTick, defineProps,computed,defineEmits} from 'vue'

const backImg = require('@/assets/imgs/id_back.png')
window.onload = function () {
  const card = document.getElementsByClassName('card')[0]
  card.addEventListener('click', () => {
    card.classList.toggle('flipped')
  })
}
// const frontImg = require('@/assets/imgs/id.png')
const props = defineProps({
  frontImg: {
    type: String,
    default: require('@/assets/imgs/id.png')
  }
})
const emit = defineEmits(['imgLoad'])

const frontImgUrl = computed(() => {
  console.log('frontImgUrl', props.frontImg)
  return props.frontImg || require('@/assets/imgs/id.png')
})
let timer

function startMove() {
  clearInterval(timer)
  let card = document.getElementsByClassName('card')[0];
  timer = setTimeout(() => {
    card.classList.toggle('flipped');
  }, 1000)
}

function stopMove() {
  console.log('clearInterval stopMove')
  clearInterval(timer)
}
defineExpose({
  startMove,
  stopMove
})
</script>

<template>
<!--  <div class="">-->
    <div class="card">
      <div class="front">
        <img :src="frontImg">
      </div>
      <div class="back">
        <img :src="backImg">
      </div>
    </div>
<!--  </div>-->
</template>

<style scoped>
.warp {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.card {

  height: 318px;
  width: 510px;
  margin: 0px auto;
  position: relative;
  /* 使该盒子具有3D属性 */
  transform-style: preserve-3d;

  /*动画效果历时1秒 */
  transition: 1s;

  /* 使具有旋转效果 */
  perspective: 1000px;
}

.front {
  width: 100%;
  height: 100%;
  //background-image: url('@/assets/imgs/id.png');
  background-size: cover;
}

.back {
  /* 让在背面显示的内容转到背面 */
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
  //background-image: url('@/assets/imgs/card-back.png');
  background-size: cover;
}

img {
  width: 100%;
  height: 100%;
}

.front,
.back {
  /* 让卡片背面与正面重合 */
  position: absolute;

  /* 隐藏卡片背面 */
  backface-visibility: hidden;
}

/* 点击时切换的样式 */
.flipped {
  transform: rotateY(180deg);
}
@media (max-width: 992px) {
  .card {
    height: 188px;
    width: 320px;
  }
}
</style>
